<!DOCTYPE HTML>
<html lang="zh-CN" manifest="h5.manifest">
    <head>
        <meta charset="utf-8"/>
        <title>大学加调查问卷</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href="./bootstrap.min.css" rel="stylesheet">
        <script src="./jquery-1.11.2.min.js"></script>
        <script src="./bootstrap.min.js"></script>
        <script>
            //sql语句执行成功后执行的回调函数
            function onSuccess() {
                alert("操作成功");
                loadAll();
            }

            //将所有存储在sqlLite数据库中的联系人全部取出来
            function loadAll() {
                if ( typeof (Storage) === "undefined") {
                    alert("该浏览器不支持本地数据存储");
                }
                vals = localStorage;
                var list = document.getElementById("list");
                //如果数据表不存在，则创建数据表
                //查询所有联系人记录
                if (vals.length > 0) {
                    var result = '<table class="table">';
                    result += "<tr><th>序号</th><th>姓名</th><th>手机</th><th>性别</th><th>专业</th><th>q1</th><th>q2</th><th>q3</th><th>q4</th>";
                    result += "<th>q5</th><th>q6</th><th>q7</th><th>q8</th><th>q9</th><th>q10</th><th>q11</th>";
                    result += "<th>添加时间</th><th>操作</th></tr>";
                    for (var i = 0; i < vals.length; i++) {
                        var getKey = vals.key(i);
                        row = JSON.parse(vals.getItem(getKey));
                        // alert(row.mobile);
                        //转换时间，并格式化输出
                        var time = new Date();
                        time.setTime(row.time);
                        var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
                        //拼装一个表格的行节点
                        result += "<tr><td>" + (i + 1) + "</td><td>" + row.username + "</td><td>" + row.mobile + "</td><td>" + row.sex + "</td><td>";
                        result += row.zhuangye + "</td><td>" + row.q1 + "</td><td>" + row.q2 + "</td><td>" + row.q3 + "</td><td>" + row.q4 + "</td><td>" + row.q5 + "</td><td>";
                        result += row.q6 + "</td><td>" + row.q7 + "</td><td>" + row.q8 + "</td><td>" + row.q9 + "</td><td>" + row.q10 + "</td><td>" + row.q11 + "</td><td>";
                        result += timeStr + "</td><td><input type='button' value='删除' onclick='del(" + row.mobile + ")'/></td></tr>";
                    }
                    list.innerHTML = result;
                } else {
                    list.innerHTML = "目前数据为空，赶紧开始加入联系人吧";
                }
            }


            Date.prototype.format = function(format) {
                var o = {
                    "M+" : this.getMonth() + 1, //month
                    "d+" : this.getDate(), //day
                    "h+" : this.getHours(), //hour
                    "m+" : this.getMinutes(), //minute
                    "s+" : this.getSeconds(), //second
                    "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter
                    "S" : this.getMilliseconds() //millisecond
                }
                if (/(y+)/.test(format))
                    format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                return format;
            }
            //删除联系人信息
            function del(mobile) {
                alert('该功能暂时停用');
                //localStorage.removeItem(mobile);
                loadAll();
            }

            //更新数据到服务
            function update() {
                if ( typeof (Storage) === "undefined") {
                    alert("该浏览器不支持本地数据存储");
                }
                vals = localStorage;
                for (var i = 0; i < vals.length; i++) {
                    var getKey = vals.key(i);
                    row = JSON.parse(vals.getItem(getKey));
                    // alert(row.mobile);
                    //转换时间，并格式化输出
                    var time = new Date();
                    time.setTime(row.time);
                    var timeStr = time.format("yyyy-MM-dd hh:mm:ss");
                    //拼装一个表格的行节点
                    result += "<tr><td>" + (i + 1) + "</td><td>" + row.username + "</td><td>" + row.mobile + "</td><td>" + row.sex + "</td><td>";
                    result += row.zhuangye + "</td><td>" + row.q1 + "</td><td>" + row.q2 + "</td><td>" + row.q3 + "</td><td>" + row.q4 + "</td><td>" + row.q5 + "</td><td>";
                    result += row.q6 + "</td><td>" + row.q7 + "</td><td>" + row.q8 + "</td><td>" + row.q9 + "</td><td>" + row.q10 + "</td><td>" + row.q11 + "</td><td>";
                    result += timeStr + "</td><td><input type='button' value='删除' onclick='del(" + row.mobile + ")'/></td></tr>";
                }
            }
        </script>
        <style>
        </style>
    </head>
    <body onload="loadAll()">
        <nav class="main-nav navbar navbar-inverse navbar-static-top clearfix">
            <!-- navbar-fixed-top -->
            <div class="container-fluid">
                <a class="navbar-brand" href="http://www.iic.cn/"> 北理工学生互联网创业问卷调查</a>
            </div>
        </nav>
        <div id="main-container" class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12">
                    <h1>北理工学生互联网创业问卷调查</h1>
                    <div id="list"></div>
                    <button type="button" class="btn btn-default" onclick="update()">
                        请在联网状态下，提交数据至服务器！
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>